<template>
	<a-drawer
		title="扫码盘库报告"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-card :bordered="false" style="background-color:#f0f0f0;padding:0;margin:0;">
			<div class="report">
				<div class="top">
					<div class="name">{{topInfo.cabinetInfoName}}{{topInfo.cabinetDoorName}}盘库报告</div>
					<div class="item">
						<div class="label">发起时间：</div>
						<div class="value">{{topInfo.createTime}}</div>
					</div>
					<div class="item">
						<div class="label">发起人：</div>
						<div class="value">{{topInfo.createUserName}}</div>
					</div>
					<div class="item">
						<div class="label">报告生成时间：</div>
						<div class="value">{{topInfo.reportTime}}</div>
					</div>
					<div class="item">
						<div class="label">报告生成人：</div>
						<div class="value">{{topInfo.reportUserName}}</div>
					</div>
					<div class="item">
						<div class="label">盘库对象：</div>
						<div class="value">
							{{topInfo.cabinetGroupName}}-{{topInfo.cabinetInfoName}}-{{topInfo.cabinetDoorName}}
						</div>
					</div>
					<div class="item">
						<div class="label">地点：</div>
						<div class="value">{{topInfo.location}}</div>
					</div>
					<div class="item">
						<div class="label">系统物品数：</div>
						<div class="value">{{topInfo.curInventory}}件</div>
					</div>
					<div class="item">
						<div class="label">盘点物品数：</div>
						<div class="value">{{topInfo.chkInventory}}件</div>
					</div>
				</div>
				<div class="normal">
					<div class="paragraph" style="color:green">
						<check-outlined/>
						正常物品({{dataList[0].length + dataList[1].length}}件)
					</div>
					<div class="segment">在库物品({{dataList[0].length}})</div>
					<ol v-if="dataList[0].length > 0">
						<li v-for="item in dataList[0]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>

					<div class="segment">借出物品({{dataList[1].length}})</div>
					<ol v-if="dataList[1].length > 0">
						<li v-for="item in dataList[1]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>
				</div>
				<div class="abnormal">
					<div class="paragraph" style="color:red;">
						<warning-outlined/>
						异常物品({{dataList[2].length + dataList[3].length + dataList[4].length + dataList[5].length + dataList[6].length}})
					</div>
					<div class="segment">实物在库系统不在库({{dataList[2].length}})</div>
					<ol v-if="dataList[2].length > 0">
						<li v-for="item in dataList[2]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>

					<div class="segment">实物不在库系统在库({{dataList[3].length}})</div>
					<ol v-if="dataList[3].length > 0">
						<li v-for="item in dataList[3]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>

					<div class="segment">实物存放处和系统存放处不一致({{dataList[4].length}})</div>
					<ol v-if="dataList[4].length > 0">
						<li v-for="item in dataList[4]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>

					<div class="segment">已报废未出库({{dataList[5].length}})</div>
					<ol v-if="dataList[5].length > 0">
						<li v-for="item in dataList[5]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>

					<div class="segment">未扫码入库({{dataList[6].length}})</div>
					<ol v-if="dataList[6].length > 0">
						<li v-for="item in dataList[6]" :key="item.id">
							<div class="goods-info">
								{{item.goodsName}}({{item.goodsCode}})
							</div>
						</li>
					</ol>
					<a-empty v-else/>
				</div>
			</div>
		</a-card>
	</a-drawer>
</template>

<script setup name="inventorycheckreport">
	import bizInventoryCheckReportApi from '@/api/biz/bizInventoryCheckReportApi'
	import bizInventoryCheckDetailApi from '@/api/biz/bizInventoryCheckApi'

	const visible = ref(false)
	const topInfo = ref({})
	const dataList = ref([[], [], [], [], [], [], []])

	// 打开抽屉
	const onOpen = (inventoryCheckId) => {
		visible.value = true
		if (inventoryCheckId) {
			bizInventoryCheckDetailApi.bizInventoryCheckDetail({id: inventoryCheckId}).then((data) => {
				topInfo.value = data
			})
			bizInventoryCheckReportApi.bizInventoryCheckReportList({inventoryCheckId}).then((data) => {
				dataList.value = [1, 2, 3, 4, 5, 6, 7].map(state => data.filter(item => item.state === state))
			})
		}
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}


	// 抛出函数
	defineExpose({
		onOpen
	})
</script>

<style lang="less" scoped>
	.report {
		margin: 20px;
		font-size: 14px;
	}

	.top {
		margin-top: 10px;
		padding: 20px;
		border-radius: 5px;
		background-color: #fff;
	}

	.name {
		font-size: 17px;
		font-weight: bold;
		text-align: center;
		color: #333;
		margin-bottom: 20px;
	}

	.item {
		display: flex;
		line-height: 20px;
		align-items: center;
		justify-content: space-between;
	}

	.label {
		color: #333;
	}

	.value {
		color: #666;
	}

	.normal {
		margin-top: 10px;
		padding: 20px 10px;
		background-color: #fff;
		border-radius: 5px;
	}

	.abnormal {
		margin-top: 10px;
		padding: 20px 10px;
		background-color: #fff;
		border-radius: 5px;
	}

	.paragraph {
		font-weight: bold;
		color: #333;
		display: flex;
		align-items: center;
		font-size: 15px;
	}

	.segment {
		font-weight: bold;
		color: #666;
		text-indent: 15px;
		margin-top: 10px;
	}

	.goods-info {
		display: flex;
	}

	ol {
		margin: 20px 40px;
	}
</style>
